
import React, { Component } from 'react'
// eslint-disable-next-line
import { Form, Input, Button, Checkbox } from 'antd';
import { Link } from 'react-router-dom'
import '../../../../static/css/login.less'
import { login } from '../../../../api/client';
// const item = Form.Item


const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        }
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
        this.props.history.push('/register')
    }

    onFinish = (values) => {
        console.log('Success:', values);
        console.log('login', values.username, values.password)
        let data = new URLSearchParams()
        data.append('username', values.username)
        data.append('password', values.password)
        login(data).then(res => {
            console.log(res)
        })
    }

    onFinishFailed(errorInfo) {
        console.log('Failed:', errorInfo);
    }

    render() {

        return (
            <>
                <div className="goback">
                    <Link to="/index">返回主页</Link>
                </div>
                <div className="loginform">
                    <Form

                        {...layout}
                        name="basic"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        {/*<Form.Item {...tailLayout} name="remember" valuePropName="checked">*/}
                        {/*    <Checkbox>Remember me</Checkbox>*/}
                        {/*</Form.Item>*/}

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                            <Button type="primary" style={{ marginLeft: '20px' }} onClick={this.handleClick}>
                                用户注册
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </>
        )
    }

}


const wrapLogin = Login
export default wrapLogin
